<template>
  <view class="pages">
    <view class="profile_title">
      <view class="profile_title_box">
        <image
          :src="detailsInfo?.avatar || 'https://ossresource.miyingbl.com/user_avatar/0.png'"
          mode="scaleToFill"
        />
        <view class="patient">
          <view class="patient_name">{{ detailsInfo?.name }}</view>
          <view class="patient_info">
            <text style="margin-right: 14rpx">{{ detailsInfo?.age }}岁</text>
            <view class="name_leng"></view>
            <text style="margin-left: 14rpx">{{ detailsInfo?.tag }}</text>
          </view>
        </view>
      </view>
      <view class="real_identifier" v-if="detailsInfo?.is_certified != 0">已实名</view>
    </view>
    <!-- 基本信息 -->
    <view class="basic_info_box">
      <view class="info_title">基本信息</view>
      <view class="info_list">
        <view style="color: #5c5c5c">身高</view>
        <view style="color: #202020">{{ detailsInfo?.height }}cm</view>
      </view>
      <view class="info_list" v-if="detailsInfo?.type == 1">
        <view style="color: #5c5c5c">目前体重</view>
        <view style="color: #202020">{{ detailsInfo?.weight }}kg</view>
      </view>
      <view class="info_list" v-if="detailsInfo?.type == 2">
        <view style="color: #5c5c5c">体重</view>
        <view style="color: #202020">{{ detailsInfo?.weight }}kg</view>
      </view>
      <view class="info_list" v-if="detailsInfo?.type == 1">
        <view style="color: #5c5c5c">孕前体重</view>
        <view style="color: #202020">{{ detailsInfo?.conceive_weight }}kg</view>
      </view>
      <view class="info_list" v-if="detailsInfo?.type == 2">
        <view style="color: #5c5c5c">生产日期</view>
        <view style="color: #202020">{{ detailsInfo?.product_date }}</view>
      </view>
      <view class="info_list" v-if="detailsInfo?.type == 1">
        <view style="color: #5c5c5c">预产期</view>
        <view style="color: #202020">{{ detailsInfo?.due_date }}</view>
      </view>
      <view class="info_list" v-if="detailsInfo?.type == 2">
        <view style="color: #5c5c5c">宝宝性别</view>
        <view style="color: #202020">{{ detailsInfo?.baby_sex }}</view>
      </view>
    </view>
    <view v-if="showList == 0">
      <!-- 产检记录 -->
      <view class="record_box">
        <view class="record_title_box">
          <view class="record_title">产检记录</view>
          <view class="look_details" @click="toRecorTest">查看详情</view>
        </view>
        <view class="cycle_box">
          <view class="cycle">{{ antenatalInfo?.name }}</view>
          <view class="product">
            <view>检查项目：</view>
            <view v-if="antenatalInfo.type == 1" class="product_list">
              <text v-for="(item, index) in antenatalInfo?.user_cate" :key="index">{{ item }}</text>
            </view>
            <view v-else class="product_list">
              <text v-for="(item, index) in antenatalInfo?.bcxm_cate" :key="index">{{ item }}</text>
            </view>
          </view>
          <view class="date_box">
            <view>{{ antenatalInfo?.date }}</view>
          </view>
          <view class="inspect_table">
            <image
              v-for="(item, index) in antenatalInfo?.cj_report"
              :key="index"
              :src="item"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
      <!-- 日常记录 -->
      <view class="dailyrecord_box">
        <view class="record_title">日常记录</view>
        <view class="record_list" v-for="(item, index) in dailyrecordList" :key="index">
          <image :src="item.img || ''" mode="scaleToFill" />
          <view
            class="record_item"
            :style="{
              border: index == dailyrecordList.length - 1 ? '0' : '1',
              height: index == dailyrecordList.length - 1 ? '50rpx' : '100rpx',
            }"
            @click="toWeightRecord(index)"
          >
            <view class="record_product">{{ item.name }}</view>
            <up-icon name="arrow-right" color="#aaa" size="16" :bold="true"></up-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 健康信息 -->
    <view v-else class="Health_info">
      <view class="Health_info_title">健康信息</view>
      <view>
        <up-collapse :border="isBorder" @change="collapseOpen" @close="closeCollapse">
          <up-collapse-item :isLink="false" v-for="(item, index) in healthInfoList" :key="index">
            <template #title>
              <text class="inspect_type">{{ item.title }}</text>
            </template>
            <template #value>
              <text class="inspect_result">{{ item.name }}</text>
            </template>
            <view class="inspect_content">春天是一年四季中最美丽的季节之一，也是最</view>
          </up-collapse-item>
        </up-collapse>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getAntenatalData, getPatienDetails } from '@/api/patients'
import { navigateTo } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const props = defineProps({
  userIds: String,
})
onLoad((o) => {
  getPatienDetailsF(props?.userIds)
  getAntenatalDataFn(props?.userIds)
})

const isBorder = ref(true)
const showList = ref(0)
//详情信息
const detailsInfo = ref({})
//产检
const antenatalInfo = ref({})
const dailyrecordList = ref([
  {
    img: '/static/patient/weight.png',
    name: '体重',
  },
  {
    img: '/static/patient/diet.png',
    name: '饮食',
  },
  {
    img: '/static/patient/exercise.png',
    name: '运动',
  },
  {
    img: '/static/patient/sleep.png',
    name: '睡眠',
  },
])
const healthInfoList = ref([
  {
    title: '过敏史',
    name: '有',
  },
  {
    title: '过往病史',
    name: '有',
  },
  {
    title: '肝功能',
    name: '异常',
  },
  {
    title: '肾功能',
    name: '异常',
  },
])
const isInterrogation = ref(false)
async function getPatienDetailsF(uid) {
  const res = await getPatienDetails({ uid : uid })
  if (res?.code == 200) {
    let newDate = Math.floor(new Date().getTime() / 1000)
    detailsInfo.value = res?.data[0]
    if (detailsInfo.value.type == 2) {
      detailsInfo.value.baby_sex = detailsInfo.value.baby_sex == 0 ? '女' : '男'
    }
    if (newDate <= detailsInfo.value.free_end_time) {
      isInterrogation.value = true
    } else {
      isInterrogation.value = false
    }
  }
}
//获取展示产检记录
async function getAntenatalDataFn(uid) {
  const res = await getAntenatalData({ uid : uid })
  if (res?.code == 200) {
    if (res.data.cj_report && res.data.cj_report.length > 3) {
      res.data.cj_report = res.data.cj_report.splice(0, 3)
    }
    antenatalInfo.value = res.data
  }
}
//去体重
function toWeightRecord(e) {
  if (e == 0) {
    navigateTo(`/pregnancys/weight-management/weight-record?isshow=${false}&uid=${props?.userIds}`)
  } else if (e == 1) {
    navigateTo(
      `/pregnancys/weight-management/diet-record/foods-and-sport?isshow=food&uid=${props?.userIds}`,
    )
  } else if (e == 2) {
    navigateTo(
      `/pregnancys/weight-management/diet-record/foods-and-sport?isshow=sport&uid=${props?.userIds}`,
    )
  } else {
    navigateTo(`/pregnancys/weight-management/sleep-record/index?isshow=${false}&uid=${props?.userIds}`)
  }
}
//
function toRecorTest() {
  navigateTo(`/pregnancys/index/time-table/record-test?uid=${props?.userIds}`)
}
function collapseOpen() {
  isBorder.value = false
  console.log(123)
}
function closeCollapse() {
  console.log(213213)
  // isBorder.value = true
}
</script>

<style lang="scss" scoped>
.pages {
  width: 100%;
  background: #f5f6f8;
  font-family: PingFangSC, PingFang SC;
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding-bottom: 200rpx;
  .profile_title {
    width: 702rpx;
    height: 140rpx;
    background: #ffffff;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    margin-top: 20rpx;
    .real_identifier {
      width: 118rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 24rpx 0rpx 0rpx 24rpx;
      border-top: 1rpx solid #00c1b9;
      border-bottom: 1rpx solid #00c1b9;
      border-left: 1rpx solid #00c1b9;
      font-size: 24rpx;
      color: #00c1b9;
      text-align: center;
      line-height: 48rpx;
    }
    .profile_title_box {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
      }
      .patient {
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 20rpx;
        .patient_name {
          font-size: 30rpx;
          color: #202020;
          font-weight: 600;
        }
        .patient_info {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          color: #5c5c5c;
          .name_leng {
            width: 1rpx;
            height: 24rpx;
            background: #5c5c5c;
          }
        }
      }
    }
  }
  .basic_info_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin: 20rpx 0;
    .info_title {
      font-size: 30rpx;
      color: #202020;
      font-weight: 600;
      margin-bottom: 10rpx;
    }
    .info_list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      border-bottom: 1rpx solid #e8e8e8;
      font-size: 28rpx;
      &:last-child {
        border-bottom: none;
        height: 50rpx;
        margin-top: 20rpx;
      }
    }
  }
  //产检记录
  .record_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    .record_title_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .record_title {
        font-size: 30rpx;
        color: #202020;
        font-weight: 600;
      }
      .look_details {
        width: 144rpx;
        height: 48rpx;
        background: #00c1b9;
        border-radius: 24rpx;
        font-size: 26rpx;
        color: #ffffff;
        text-align: center;
        line-height: 48rpx;
      }
    }
    .cycle_box {
      margin-top: 20rpx;
      .cycle {
        font-weight: 600;
        font-size: 28rpx;
        color: #00c1b9;
      }
      .product {
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        font-size: 26rpx;
        color: #5c5c5c;
        .product_list {
          width: 500rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          text {
            margin-right: 10rpx;
          }
        }
      }
      .date_box {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #5c5c5c;
      }
    }
    .inspect_table {
      display: flex;
      align-items: center;
      margin-top: 6rpx;
      image {
        width: 180rpx;
        height: 180rpx;
        margin-right: 10rpx;
        border-radius: 10rpx;
      }
    }
  }
  //日常记录
  .dailyrecord_box {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin-top: 20rpx;
    .record_title {
      font-weight: 600;
      font-size: 30rpx;
      color: #202020;
    }
    .record_list {
      display: flex;
      align-items: center;
      image {
        width: 29rpx;
        height: 30rpx;
      }
      .record_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 612rpx;
        margin-left: 26rpx;
        height: 100rpx;
        border-bottom: 1rpx solid #e8e8e8;
        .record_product {
          font-size: 28rpx;
          color: #202020;
        }
      }
      &:last-child {
        margin-top: 20rpx;
      }
    }
  }
  //健康信息
  .Health_info {
    width: 702rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    margin-top: 20rpx;
    .Health_info_title {
      font-weight: 600;
      font-size: 30rpx;
      color: #202020;
    }
    .inspect_type {
      font-size: 28rpx;
      color: #5c5c5c;
    }
    .inspect_result {
      font-size: 28rpx;
      color: #202020;
    }
    .inspect_content {
      background: #f5f6f8;
      border-radius: 10rpx;
      padding: 20rpx;
    }
  }
}
</style>
